<template>



    <div>
      <!--查询列表-->
      <el-form ref="form" :model="formDate" label-width="80px" :inline="true" >

        <el-form-item>
          <el-select v-model="formDate.region" placeholder="请选择出租状态">

            <el-option label="请选择出租状态" value=""></el-option>
            <el-option label="待租中" value="0"></el-option>
            <el-option label="已出租" value="1"></el-option>
            <el-option label="维修中" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formDate.name" placeholder="请选择发布状态">
            <el-option label="请选择发布状态" value=""></el-option>
            <el-option label="未发布" value="0"></el-option>
            <el-option label="已发布" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input v-model="formDate.houseName" placeholder="请输入楼盘关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formDate.houseKey" placeholder="请输入房源名称关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="OnSubmit">查询</el-button>
        </el-form-item>


      </el-form>


      <el-button @click="selectIon()" style="background: #f47920;color: white">推荐房源</el-button>
      <el-button @click="deleteIon()" style="background: #f47920;color: white">取消推荐</el-button>

      <el-table
        height="500"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          prop="id"
          width="55">
        </el-table-column>
        <el-table-column
          label="id"
          prop="id"
          width="120">
        </el-table-column>
        <el-table-column
          prop="front_cover"
          label="房源图片"
          width="120">
          <template scope="scope">
              <el-image :src="scope.row.front_cover"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="room_name"
          label="房源名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="name"
          label="楼盘名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="room_code"
          label="房源编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="proportion"
          label="面积"
          width="120">
        </el-table-column>
        <el-table-column
          prop="rental"
          label="租金"
          width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="出租状态"
          width="120">
          <template scope="scope">
             <span v-if="scope.row.status==0">待出租</span>
             <span v-if="scope.row.status==1">已出租</span>
             <span v-if="scope.row.status==2">未出租</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="username"
          label="发布人"
          width="120">
        </el-table-column>
        <el-table-column
          prop="publish_status"
          label="发布状态"
          width="120">
          <template scope="scope">
            {{scope.row.publish_status==1?"已发布":"未发布"}}
          </template>
        </el-table-column>
        <el-table-column
          prop="recommended"
          label="是否推荐"
          width="120">
          <template scope="scope">
            {{scope.row.recommended==1?"已推荐":"不推荐"}}
          </template>
        </el-table-column>

      </el-table>



      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.formDate.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.formDate.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.formDate.total">
      </el-pagination>




    </div>
</template>

<script>
import { list } from "@/api/houses/housing/hous";
import { updateId } from "@/api/houses/housing/hous";


export default {
  name: "index",
  data(){
     return {
       formDate:{
          pageNum:1,
          pageSize:10,
          total:0,
          name:"",
          region:"",
         houseKey:"",
         houseName:""
       },
       tableData: [],
       multipleTable:[]
     }
  },
  created() {
    this.getList();


  },
  methods:{
    getList(){
      list(this.formDate).then(response=>{
        /*alert(JSON.stringify(response.list));*/
        this.tableData=response.list;
        this.formDate.pageNum=response.pageNum;
        this.formDate.pageSize=response.pageSize;
        this.formDate.total=response.total;

      }).catch(error=>{
        alert(JSON.stringify(error));
      });
    },
    handleSizeChange(val) {
      this.formDate.pageSize=val;
      this.getList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.formDate.pageNum=val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
    OnSubmit(){
      list(this.formDate).then(response=>{
        this.tableData=response.list;
        this.formDate.pageNum=response.pageNum;
        this.formDate.pageSize=response.pageSize;
        this.formDate.total=response.total;

      }).catch(error=>{
        alert(JSON.stringify(error));
      });
    },
    selectIon(){

      let id = this.multipleTable.map(row=>row.id).join(",");

      if(id!='' && id!=null && id!=undefined){
        updateId({id:id}).then(re => {
            if(re){
             alert("推荐成功");
            }

        }).catch(error => {
          alert(error);
        });
      }else {
        this.$alert('请选择一条记录', '信息', {
          confirmButtonText: '确定',
        });
      }


    },
    handleSelectionChange(val){
      this.multipleTable=val
    },
    deleteIon(){
      let id = this.multipleTable.map(row=>row.id).join(",");

      if(id!='' && id!=null && id!=undefined){
        updateById({id:id}).then(re => {
          if (re) {
            alert("成功");
          }
        }).catch(error=>{
          alert(error);
        })
      }
    }
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #fedcbd;
  color: #333;
  text-align: center;
  line-height: 30px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 560px;
}
</style>
